<template>
    <div class="che_dan_wp">
        <div class="tab_title">
            <span>挂单小窗口</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-chedanview')"></i>
        </div>
        <el-table :data="tiaoJianList" style="width: 500px;border: 1px solid #979ba2;box-shadow:  0 0 1px 1px #c0c2c6;"
            height="178" size="small" border>
            <el-table-column show-overflow-tooltip label="时间" width="90">
                <template #default="scope">
                    <div> {{ moment(scope.row['报单时间'] * 1000).format('HH:mm:ss') }} </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="合约名称" label="合约" width="90"></el-table-column>
            <el-table-column show-overflow-tooltip prop="状态" label="状态"></el-table-column>
            <el-table-column show-overflow-tooltip label="买卖" width="32">
                <template #default="scope">
                    <div :style="{ color: scope.row['买卖方向'] == 1 ? 'red' : 'green' }"> {{ scope.row['买卖方向']
                        == 1
                        ?
                        '买' : '卖' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="开平" width="32">
                <template #default="scope">
                    <div> {{ scope.row['开平'] == 1 ? '开' : '平' }} </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="委托价" width="55">
                <template #default="scope">
                    <div> {{ Number(scope.row['报单价格']) }} </div>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="报单手数" label="委托量" width="55"></el-table-column>
            <el-table-column show-overflow-tooltip label="可撤" width="55">
                <template #default="scope">
                    <div v-if="scope.row['状态'] == '未成交还在队列中'">
                        <span class="wei_tuo_che" @click="xiandanBtnTap('委托撤', scope.row)">撤单</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
const { ref } = require('vue')
const { ipcRenderer } = require('electron');
const tiaoJianList = ref([])
ipcRenderer.on('chedanview-data', (e, v) => {
    tiaoJianList.value = JSON.parse(v)
})
function xiandanBtnTap(type, v) {
    ipcRenderer.send('placeAnOrderWindow_click_msg', {
        type: '撤单指令发送',
        v: JSON.stringify(v),
        status: type,
    })
}


</script>

<style scoped lang="less">
.che_dan_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 210px;

    .tab_title {
        background-color: #ebf6f9;
        color: #919191;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    :deep(.el-table th.el-table__cell>.cell),
    :deep(.el-table td.el-table__cell div) {
        padding: 0;
        padding-right: 3px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    :deep(.el-table th.el-table__cell.is-leaf),
    :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
        padding: 0;
        color: #000000;
        font-weight: normal;
    }

    :deep(.el-table th.el-table__cell.is-leaf) {
        background-color: #f0f0f0;
        border-color: #aaaaaa;
    }

    :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
        background-color: #f1f8ff;
        border-color: #f0f0f0;
    }

    :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell .cell) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    :deep(.el-scrollbar__bar.is-horizontal) {
        height: 5px;
    }

    :deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar) {
        width: 0;
        height: 0;
    }

    :deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb) {
        background: #c0c0c0;
        border-radius: 5px;
    }

    :deep(.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
        background: #c0c0c0;
    }

    :deep(.current-row .cell) {
        background-color: #9ecee7;
    }
}
</style>
